<template>
  <div>
    <!--

    开发环境
        根目录创建一个.env.development
        定义环境变量，规则限制:一定要VUE_APP_    如VUE_APP_TITO
        访问环境变量：process.env.VUE_APP_TITO
    生产环境
        更目录创建一个.env.production
        定义环境变量：规则限制：一定要以VUE_APP_开头 如VUE_APP_TOTO
        访问环境变量：process.env.VUE_APP_TITO

    -->

    <!--
      vue  transition动画  进入/离开（v-if/v-show）
         1. 使用transition的包住需要的动画
         2. 在transition添加name='xxx'
         3. 4个配置项 name是啥类名就是啥
              .xxx-enter        开始动画
              .xxx-enter-actve  开始动画时间
              .xxx-leave-to     结束动画
              .xxx-leave-active 结束动画时间

    -->
    {{ titou }}

    {{ TOTO }}

    <p @click=" a=!a">xxxx</p>

    <transition name="aaaa">

      <div v-if="a" class="box" />

    </transition>

    <br>
    {{ a }}
    <button @click="xxx">发送</button>
    <index2 />
  </div>
</template>

<script>
import { syslogin } from '@/api/user'
import index2 from './index2.vue'
export default {
  name: 'DasHboard',

  components: {
    index2
  },
  data() {
    return {

      a: true,
      // 如果要用每次都要写三元表达吗
      titou: process.env.NODE_ENV === 'devlopment' ? '开发环境' : '生产环境',
      TOTO: process.env.VUE_APP_TOTO
    }
  },
  methods: {

    async xxx() {
      const res = await syslogin()

      console.log(res)
    }
  }

}
</script>

<style scoped lang="scss">

  .box{
    margin: 0 auto;
    width: 50px;
    height: 50px;
    background-color: red;
  }

  .aaaa-enter{
     transform: translateX(-200px);
  }
  .aaaa-enter-active{
    transition: all 0.5s;

  }

  .aaaa-leave-to{
    transform: translateX(200px);
  }
  .aaaa-leave-active{
    transition: all 0.5s;

  }

</style>
